<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('已开放实验列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <p>在线实验名称：</p>
                            <input type="text" name="onlineExperimentName" th:id="onlineExperimentName"/>
                        </li>
                        <li>
                            <p>在线实验网址：</p>
                            <input type="text" name="onlineExperimentUrl" th:id="onlineExperimentUrl"/>
                        </li>
                        <li>
                            <p>专业：</p>
                            <div class="col-sm-8">
                                <!--<input name="profession" th:field="*{profession}" class="form-control" type="text">-->
                                <select name="profession" id="profession" th:with="dicts=${@dict.getType('sys_profession')}">
                                    <option value="">请选择</option>
                                    <option th:each="dict:${dicts}" th:value="${dict.dictValue}" th:text="${dict.dictLabel}"></option>
                                </select>
                            </div>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="init()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                        <li>
                            <!--<a class="btn btn-primary multiple disabled " onclick="getAllOrder()"><i class="fa fa-search"></i>&nbsp;查看预约情况</a>-->
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="getAllOrder()" shiro:hasPermission="system:onlineExperimentOrders:view">
                                <i class="fa fa-search"></i> 查看预约情况
                            </a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
       <div class="col-sm-12 select-table table-striped" id="dataTable">
           <div style="text-align: center;" id="titleContent" hidden=""><h3>不好意思，没有开放的试验</h3></div>
       </div>

    <!--<div class="col-md-4" style="padding-top: 20px;">

    </div>-->
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">

    var editFlag = [[${@permission.hasPermi('system:onlineExperimentOrder:edit')}]];

    var prefix= ctx + '/system/onlineExperimentOrder';


    $(function () {
        var count=0;
        $.ajax({
            type : 'post',
            url : prefix + '/list',
            dataType : 'json',
            success: function (data) {
                console.log(data)
                $("#titleContent").attr("hidden", "true");
                if(data.rows==null){
                    $("#titleContent").attr("hidden", false);
                }else{
                    for (var i = 0; i < data.rows.length; i++) {
                        if(data.rows[i].ifOpen==2){
                            count++
                        }else{
                            var value1 = "<div class=\"col-md-3\" style=\"padding-top: 20px;\">\n" +
                                "            <div class=\"card\">\n" +
                                "                <img src='" + ctx + data.rows[i].onlineExperimentImg + "' style=\"width: 100%;height: 202px\"\n" +
                                "                     class=\"card-img-top\" alt=\"...\">\n" +
                                "                <div class=\"card-body\">\n" +
                                "                    <h4 class=\"card-title\" >" + data.rows[i].onlineExperimentName + "</h4>\n" +
                                "                    <p class=\"card-text\"><span class=\"glyphicon glyphicon-play-circle\"></span><span>"+data.rows[i].professionName+"</span></p>\n" +
                                "                    <div style='float: right;padding-right: 20px\'><button class='btn btn-warning' onclick='answerQuestion(this.value)' value='"+data.rows[i].onlineExperimentId+"'>实验答疑</button></div>" +
                                "                    <div style=\"float: right;padding-right: 20px\"><button class='btn btn-primary' onclick='orderExperiment(this.value)' value='"+data.rows[i].onlineExperimentId+"'>预约实验</button></div>\n" +
                                "                </div>\n" +
                                "            </div>\n" +
                                "        </div>";
                            $("#dataTable").append(value1)
                        }
                    }
                }
            }
        })
    })

    /*调用获取信息，初始化页面内容*/
    function init(){
        $("#dataTable").html('');
        var count=0;
        $.ajax({
            type : 'post',
            data : {
                'onlineExperimentName' : $("#onlineExperimentName").val(),
                'onlineExperimentUrl' : $("#onlineExperimentUrl").val(),
                'profession' : $("#profession").val()
            },
            url : prefix + '/list',
            dataType : 'json',
            success: function (data) {
                $("#titleContent").attr("hidden", "true");
                if(data.rows==null){
                    $("#titleContent").attr("hidden", false);
                }else{
                    for (var i = 0; i < data.rows.length; i++) {
                        if(data.rows[i].ifOpen==2){
                            count++
                        }else{
                            var value1 = "<div class=\"col-md-3\" style=\"padding-top: 20px;\">\n" +
                                "            <div class=\"card\">\n" +
                                "                <img src='" + ctx + data.rows[i].onlineExperimentImg + "' style=\"width: 100%;height: 202px\"\n" +
                                "                     class=\"card-img-top\" alt=\"...\">\n" +
                                "                <div class=\"card-body\">\n" +
                                "                    <h4 class=\"card-title\" >" + data.rows[i].onlineExperimentName + "</h4>\n" +
                                "                    <p class=\"card-text\"><span class=\"glyphicon glyphicon-play-circle\"></span><span>"+data.rows[i].professionName+"</span></p>\n" +
                                "                    <div style='float: right;padding-right: 20px'><button class='btn btn-warning' onclick='answerQuestion(this.value)' value='"+data.rows[i].onlineExperimentId+"'>实验答疑</button></div>" +
                                "                    <div style=\"float: right;padding-right: 20px\"><button class='btn btn-primary' onclick='$.operate.add(this.value)' value='"+data.rows[i].onlineExperimentId+"'>预约实验</button></div>\n" +
                                "                </div>\n" +
                                "            </div>\n" +
                                "        </div>";
                            $("#dataTable").append(value1)
                        }
                    }
                }
            }
        })
    }

    /**
     * 预约实验
     * @param value
     */
    function orderExperiment(value){
        $.modal.confirm("若已预约该实验，则更新预约信息，同时即使已审批，也要求再次审批", function() {
            $.modal.open('预约实验',ctx+"/system/onlineExperimentOrder/add?id="+value,800,450);
        })
        /*$.modal.msg("已预约实验，则更新预约信息");
        setTimeout(function () {
            $.modal.open('预约实验',ctx+"/system/onlineExperimentOrder/add?id="+value,800,450);
        }, 1000);*/
    }

    /**
     * 获取预约详情
     */
    function getAllOrder() {
        window.location.href= prefix + "/getAllOrder";
    }


    /**
     * 实验答疑
     */
    function answerQuestion(value){
        var href = ctx + "/system/question";
        window.location.href = href + "/look?experimentId=" + value;
    }
</script>
</body>
</html>